<script>

import {Key, Link, Postcard, UserFilled} from "@element-plus/icons-vue";
import InfoCard from "../../components/card/InfoCard.vue";
import StatusCard from "../../components/card/StatusCard.vue";
import BindingCard from "../../components/card/BindingCard.vue";
import PasswordCard from "../../components/card/PasswordCard.vue";

export default {
  name: "User",
  computed: {},
  components: {UserFilled, PasswordCard, BindingCard, StatusCard, InfoCard, Key, Postcard, Link},
  data() {
    return {
      activeFun: "status",
    }
  }
}

</script>

<template>
  <el-row class="outer-container">
    <el-col :span="8">

      <!--      ID CARD-->
      <el-card shadow="always" class="avatar-card">
        <el-row>
          <el-col :span="8">
            <el-avatar @error="evt => console.log(evt)"
                       :src="this.$store.state.user.avatarUrl" size="large" class="bordered-avatar"/>
          </el-col>
          <el-col :span="16">
            <el-row class="mb-10 mt-5">
              <el-text>{{ this.$store.state.user.nickname }}</el-text>
            </el-row>
            <el-row>
              <el-text>ID: {{ this.$store.state.user.id }}</el-text>
            </el-row>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="option-card">
        <el-menu
            default-active="status"
            @select="(index) => activeFun = index"
        >
          <el-menu-item index="status">
            <el-icon>
              <Postcard/>
            </el-icon>
            账号状态
          </el-menu-item>
          <el-menu-item index="info">
            <el-icon>
              <el-icon>
                <UserFilled/>
              </el-icon>
            </el-icon>
            信息修改
          </el-menu-item>
          <el-menu-item index="binding">
            <el-icon>
              <Link/>
            </el-icon>
            账号绑定
          </el-menu-item>
          <el-menu-item index="password">
            <el-icon>
              <Key/>
            </el-icon>
            修改密码
          </el-menu-item>
        </el-menu>
      </el-card>

    </el-col>

    <!--    操作框-->
    <el-col :span="16">
      <!--        账号状态-->
      <StatusCard v-if="activeFun === 'status'"/>

      <!--        个人信息-->
      <InfoCard v-if="activeFun === 'info'"/>

      <!--        账号绑定-->
      <BindingCard v-if="activeFun === 'binding'"/>

      <!--        修改密码-->
      <PasswordCard v-if="activeFun === 'password'"/>
    </el-col>
  </el-row>
</template>

<style scoped>
.outer-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2%;
  width: 60%;
}

.avatar-card {
  width: 90%;
}

.option-card {
  margin-top: 10%;
  width: 90%;
}
</style>